<!--
  @desc: 签署意见
  @author: liuyun
-->
<template>
    <div class="bg">
        <Header :title="title" :switchHeader='switchHeader'></Header>
        <div class="card">
          <ul class="steps">
            <li class="active">标签评价</li>
            <li class="active">签署意见</li>
            <li>风险探测</li>
            <li>提交</li>
          </ul>
        </div>
        <div class="card">
          <div class="item">
            <p>审查审批意见</p>
          </div>
          <div class="item" @click="toggle" key="0">
            <span>同意</span>
            <span v-show='isShow' class="icon">选中图标</span>
            <!-- <md-icon name="circle-right" size="md" v-show="isShow"></md-icon> -->
          </div>
          <div class="item">
            <span>有条件同意</span>
            <span v-show='isShow' class="icon">选中图标</span>
            <!-- <md-icon name="circle-right" size="md" v-show="isShow"></md-icon> -->
          </div>
          <div class="item">
            <span>不同意</span>
            <span v-show='isShow' class="icon">选中图标</span>
            <!-- <md-icon name="circle-right" size="md" v-show="isShow"></md-icon> -->
          </div>
          <div class="item border-x">
            <span>退回</span>
            <span v-show='isShow' class="icon">选中图标</span>
            <!-- <md-icon name="circle-right" size="md" v-show="isShow"></md-icon> -->
          </div>
        </div>
        <div class="card textareaBox">
          <p class="item border-x">意见详情</p>
            <textarea class="info" placeholder=" 请输入" maxlength="300" @input="valueInput" v-model="inputText"></textarea>
            <span class="wordsNum">{{textInput}}/300</span>
        </div>
        <div class="selctbtn">
          <div class="btn btn1">上一步</div>
          <div class="btn">下一步</div>
        </div>
    </div>
</template>

<script>
import Header from '../detail/info1'
import { Icon } from 'mand-mobile'
export default {
  data () {
    return {
      title: '签署意见',
      switchHeader: true,
      isShow: false,
      textInput: 0,
      inputText: ''
    }
  },
  components: {
    Header,
    [Icon.name]: Icon
  },
  methods: {
    getDesc: function () {
      this.$router.push('/descript')
    },
    valueInput: function () {
      this.textInput = this.inputText.length
    },
    toggle: function () {
      this.isShow = !this.isShow
    }
  }
}</script>

<style lang="stylus" scoped>
  .bg
    width 100%
    height 100%
    background rgba(244, 244, 244, 1)
  .card
    background rgba(255, 255, 255, 1)
    padding 10px 0
    margin .625rem .3125rem
    border-radius .3125rem
  .item
    position relative
    height .9375rem
    line-height .9375rem
    padding .3125rem .625rem
    border-bottom .0625rem solid #eee
    font-size .5rem
  .border-x
    border-bottom none
  .info
    display block
    width 80%
    height 2.8125rem
    margin 0 auto .3125rem
    font-size 0.5rem
    background-color #F4F4F4
  .textareaBox
    position relative
  .wordsNum
    position absolute
    bottom: 0.92rem
    right: 1.2rem
    color: #B3B3B3
    font-size: 0.5rem
  .selctbtn
    width 100%
    height 1.5rem
    display flex
    justify-content space-around
  .btn
    width 38%
    height .9375rem
    line-height .9375rem
    text-align center
    border-radius .625rem
    background #5A4347
    color #F2E0B3
    font-size .375rem
  .btn1
    border: 1px solid #000000
    background #FFFFFF
    color #000000
  .steps
    display flex
    justify-content center
    align-content center
    position relative
    counter-reset step;
    background #fff
  .steps li
    list-style-type none
    font-size .4rem
    text-align center
    width: 23%
    position relative
    float left
    height 1rem
    line-height 1rem
    padding .82rem 0
  .steps li:before
    display: block
    content: counter(step)
    counter-increment: step
    width: .1875rem
    height: .1875rem
    background-color:#ccc
    line-height: .1875rem
    border-radius .625rem
    font-size: 0;
    color: #fff;
    text-align: center;
    font-weight: 300;
    margin: 0 auto .0625rem auto
  .steps li ~ li:after
    content: '';
    width: 100%;
    height .0625rem
    background-color:#ccc
    position: absolute
    left: -48%
    top: .875rem
    z-index: 0
  .steps .active:before, .steps li.active:after
    background-color #EE7736
  .active:nth-of-type(2)
    color #EE7635
  .icon
    display inline
    float right
</style>
